<template>
  <div class="myInfo-container">
    <!-- 头部导航栏 -->
    <mm-nav-bar title="我的资料" back='/my'></mm-nav-bar>
    <!-- 资料内容区 -->
    <div class="main-container">
      <!-- 单元格 -->
      <mm-cell title="头像" class="one-cell circle" @click="hEditInfo('avatar')">
        <img class="head" :src="avatarUrl" alt="">
      </mm-cell>
      <div class="cell-group circle">
        <mm-cell title="昵称" :value='userInfo.nickname' @click="hEditInfo('nickname')"></mm-cell>
        <mm-cell title="性别" :value='genderText' @click="hChangeGender"></mm-cell>
        <mm-cell title="地区" :value='areaText' @click="hChangeArea"></mm-cell>
        <mm-cell title="个人简介" :value='userInfo.intro' @click="hEditInfo('intro')"></mm-cell>
      </div>
      <!-- 退出登录按钮 -->
      <van-button class="quit-btn circle" @click="hExit" type="default" block>退出登录</van-button>
    </div>
    <!-- 性别弹出层 -->
    <van-popup v-model="isShowGender" position='bottom' round>
      <!--ref用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上-->
      <van-picker
        ref='genderPicker'
        show-toolbar
        :columns="genderColumns"
        @cancel="isShowGender = false"
        @confirm="onGenderConfirm"
      >
      </van-picker>
    </van-popup>
    <!-- 区域选择 -->
    <van-popup v-model="isShowArea" position='bottom' round>
      <van-area
        title="省市"
        ref="areaPicker"
        :area-list="areaList"
        :columns-num="2"
        @cancel="isShowArea = false"
        @confirm="onAreaConfirm"
      />
      <!-- area-list省市区数据；
           columns-num显示列数；
           -->
    </van-popup>
  </div>
</template>

<script>
// 引入顶部导航栏
import mmNavBar from '@/components/mmNavBar'
// 引入单元格
import mmCell from '@/components/mmCell'
// 导入辅助函数
import { mapState, mapGetters, mapMutations } from 'vuex'
// 导入接口
import { editUserInfo } from '@/api/myApi.js'
// 导入地区数据
import areaList from '@/utils/area.js'
// 导入token方法
import { removeToken } from '@/utils/token.js'

export default {
  name: 'myInfo',
  data () {
    return {
      isShowGender: false, // 是否显示性别弹层
      isShowArea: false, // 是否显示地区弹层
      genderColumns: ['未知', '靓仔', '靓妹'], // 弹出层性别数据
      areaList // 弹出层地区数据
    }
  },
  components: {
    mmNavBar,
    mmCell
  },
  computed: {
    // Vuex数据
    ...mapState(['userInfo']),
    // Vuex计算属性
    ...mapGetters(['avatarUrl', 'genderText', 'areaText'])
  },
  methods: {
    // Vuex修改数据
    ...mapMutations(['CHANGEONE', 'CHANGEUSERINFO', 'CHANGEISLOGIN']),

    // 修改昵称/个人简介
    hEditInfo (prop) {
      this.$router.replace(`/editInfo?prop=${prop}`)
    },

    // 修改性别
    // 1. 弹框
    hChangeGender () {
      this.isShowGender = true
      // -$nextTick 是数据更新后,并且dom更新完毕执行的回调函数
      // picker选择器是点击之后才渲染的（异步），没有$nextTick会获取不到选择器
      this.$nextTick(() => {
        console.log(this.$refs.genderPicker)
        console.log(this.userInfo.gender)
        // 设置性别默认选中值
        // -setColumnValue 是picker组件中动态设置选项的方法 （列数，显示的数据）！！！注意setColumnValues是设置所有选项
        // -this.$refs获取到操作的picker
        this.$refs.genderPicker.setColumnValue(0, this.genderText)
      })
    },
    // 2.确认修改性别
    onGenderConfirm (value, index) {
      // 加载状态
      this.$toast.loading('努力修改中^_^')
      // 执行修改性别
      this.doChangeGender(index)
      // 关闭弹出层
      this.isShowGender = false
    },
    // 3.执行修改性别
    async doChangeGender (index) {
      try {
        const res = await editUserInfo({ gender: index })
        // console.log(res)
        // 请求成功
        if (res.data.code === 200) {
          this.$toast.success('修改成功')
          // 更新Vuex指定数据
          this.CHANGEONE({
            infoName: 'gender', // 选中要改的
            infoValue: index // 要改的数据
          })
        }
      } catch (err) {
        console.log(err)
        this.$toast.fail('修改失败')
      }
    },

    // 修改地区
    // 1. 弹框
    hChangeArea () {
      // 弹出
      this.isShowArea = true
      // 设置默认值
      this.$nextTick(() => {
        // -reset(哪一项)根据参数重置所有选项，（）为重置到第一项
        this.$refs.areaPicker.reset(this.userInfo.area)
      })
    },
    // 2. 确认修改地区
    onAreaConfirm (value) {
      // console.log(value) // [{省}， {市}]
      // 加载状态
      this.$toast.loading('马上就好啦^_^')
      // 执行修改地区
      this.doCahngeArea(value)
      // 关闭弹层
      this.isShowArea = false
    },
    // 3.执行修改地区 (需要的是地区编码)
    async doCahngeArea (value) {
      try {
        const res = await editUserInfo({ area: value[1].code })
        console.log(res)
        if (res.data.code === 200) {
          this.$toast.success('修改成功')
          // 更新Vuex指定数据
          this.CHANGEONE({
            infoName: 'area',
            infoValue: value[1].code
          })
        }
      } catch (err) {
        console.log(err)
        this.$toast.fail('修改失败')
      }
    },

    // 退出登录
    hExit () {
      // 弹框提示
      this.$dialog.confirm({
        message: '你真的要走吗o(╥﹏╥)o'
      }).then(() => {
        // 确定
        // 删除token
        removeToken()
        // 修改登录状态
        this.CHANGEISLOGIN(false)
        // 清空用户信息
        this.CHANGEUSERINFO('')
        // 跳转到登录页
        this.$router.replace('/login')
      }).catch(() => {
        // 取消
      })
    }
  }
}
</script>

<style lang='less'>
.myInfo-container {
  .main-container {
    padding: 19px 15px 315px;
    .one-cell {
      .head {
        margin-top: 8px;
        width: 40px;
        height: 40px;
        border: 3px solid rgba(255, 255, 255, 0.38);
        border-radius: 50%;
      }
    }
    .cell-group {
      margin-top: 10px;
      overflow: hidden;
    }
    .quit-btn {
      height: 50px;
      margin-top: 15px;
      font-size: 16px;
      color: @main-color;
    }
    .circle {
      border-radius: 8px;
    }
  }
}
</style>
